import React, { Component, createContext } from 'react'

import A from "./components/a.js"
import B from "./components/b.js"
import C from "./components/c.js"

export const Context = React.createContext({ activeKey: null });

export default class index extends Component {
    constructor(props) {
        super(props)
    }
    change = () => {
        console.log("点击,触发父组件的方法")
    }


    CBtn = () => {
        console.log("--", this.child)
        this.child.bbb()  //  父组件 调用 子组件 方法
    }
    onRef = (ref) => {
        this.child = ref
    }

    
  render() {
    return (
      <div>
          跨组件 通信
          <Context.Provider value={{activeKey: 'bao', a: 0, change: this.change}}>
            <hr />
            {/* 类组件 */}
            <A />
            <hr />
            {/* 函数组件 */}
            <B />
          </Context.Provider>
          <hr />
            <C ccc={this.CBtn} dd="bao"  onRef={(ref) => this.onRef(ref)} />
            <button onClick={this.CBtn} > 父组件 按钮 </button>
      </div>
    )
  }
}
